<template>
    <div style="width: 100%; height: 100%">
        <div id="iddivframe" style="width: 85%; height: 100%; float: right">
            <iframe id="idsysframe" src="" frameborder="0" width="100%" height="700px"></iframe>
        </div>
        <div style="width: 14%; height: 99%; float: right">
            <div style="width: 100%; height: 100%">
                <el-tree
                    :data="tree"
                    :props="defaultProps"
                    accordion
                    node-key="userName"
                    ref="tree"
                    @node-click="handleNodeClick"
                    @check-change="handleClick"
                    font-size="15px"
                    id="tree_1"
                >
                    <span class="1" slot-scope="{ node }">
                        <!-- :class=" role == group ? '' : 'el-icon-collection'"  -->
                        <span style="font-size: 15px; font-family: '微软雅黑'"> {{ node.label }} </span>
                    </span>
                </el-tree>
            </div>
        </div>
    </div>
</template>
<script>
import project from '@/api/project_house/project.js';
export default {
    data() {
        return {
            data: {
                title: '系统设置'
            },
            text: '',
            tree: [
                {
                    label: '用户管理',
                    flgclick: '0',
                    children: [
                        {
                            label: '用户注册',
                            jumpurl: 'user_view',
                            flgclick: '1'
                        }
                    ]
                },
                {
                    label: '单位管理',
                    flgclick: '0',
                    children: [
                        {
                            label: '单位管理',
                            jumpurl: 'unit_view',
                            flgclick: '1'
                        }
                    ]
                },
                {
                    label: '乡镇配置',
                    flgclick: '0',
                    children: [
                        {
                            label: '乡镇配置',
                            jumpurl: 'town_view',
                            flgclick: '1'
                        }
                    ]
                }
            ],
            tableChecked: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            value: true,
            value1: true,
            value2: true,
            value3: true,
            leafCheckedNodes: [],
            checkedNodes: ''
        };
    },
    created() {
        setTimeout(function () {
            setTreeIcon();
        }, 10);
        this.getList();
    },
    methods: {
        getCheckedNodes() {
            this.checkedNodes = this.$ref.tree.getCheckedNodes();
        },
        //点击用户树
        handleNodeClick(data, checked, node) {
            if (data.flgclick == '1') {
                $('#iddivframe').html(
                    '<iframe id="idframe" src="view?path=/TL/#/' + data.jumpurl + '" frameborder="0" width="100%" height="600px"></iframe>'
                );
            }else{
                $('#iddivframe').html(
                    '<iframe id="idframe" src="" frameborder="0" width="100%" height="600px"></iframe>'
                );
            }
            if (checked) {
                this.$ref.tree.setCheckedNodes([data]);
                //将数据传入到List
                this.$ref.tree.getCheckedNodes([data]);
                //获取选中目标信息
                alert(this.$ref.tree.getCheckedKeys());
                // this.list = null
                this.leafCheckedNodes = [];
            }
        },
        // 模糊查询
        search() {
            project.search().then((response) => {
                this.data2 = response.data;
            });
        },
        // 获取数据树
        getList() {}
    }
};
function setTreeIcon() {
    var icon = $('#tree_1').children('div');
    for (var i = 0; i < icon.length; i++) {
        var a = $(icon[i]).children('.el-tree-node__content').find('.1');
        console.log(a[0]);
        for (var n = 0; n < a.length; n++) {
            $(a[n]).attr('class', 'el-icon-document-copy');
        }
        // }
        // for(var n = 0; n<a.length;n++){
        //     console.log(a[n])
        //     $(a[n]).attr('class','')
        // }
    }
}
</script>
<style>
.el-tree {
    height: 96%;
}
.el-tree-node__label {
    font-size: 15px;
    font-family: '微软雅黑';
}
.el-tree-node__content > .el-tree-node__expand-icon {
    padding: 5px;
}

.i_1 {
    background-color: transparent !important;
    border: 0;
}
.el-icon-document-copy {
    background-image: url('../../../assets/img/文件夹.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
}
.el-icon-document-copy:before {
    visibility: hidden;
}
</style>